Uploading the Template

The first step to get started with your template is to upload it to your blog and the following instructions will guide you through it.

Back Up your Template First

Backing up your current template is a good idea in case you need it later if you change your mind. Refer to the following guide to learn how to backup-up your template.

Uploading the XML file

In the folder you have downloaded, you will find a file named Slate-Template-v1.xml, it's the template file you need to upload

Go to your Blog Dashboard > Template > Click on the Backup/Restore button on the top right corner and upload the .xml file there.

Editing Navigation Links

To change the navigation links, go to your Blogger Dashboard > Layout > 'Edit' under 'page' widget.

Now in the widget add links to the blog pages or any other page you want. Enter the page names and the URL you want it to go on when clicked and then click on "Add link" to add it to the list.

You can re-arrange the links and limit the the number of links you want to show from the options provided.

Editing Secondary Navigation Links (Categories)

The secondary navigation is operated by using the labels name you used on your blog with a Label widget. You can control the labels you want on the secondary navigation bar.

To change the navigation links, go to your Blogger Dashboard > Layout > 'Edit' under 'categoryNav' section..

Choose the desired settings, you can select specific labels to display on the nav bar if you wish.

Note: Do not select "Cloud" option in "Display", it will render the nav bar broken.

Chage Header Image Background

With this template you can also change the default background image of the header to whatever image or photo you want. It needs to be in the required dimension (1280px wide and 160px in height) to fit in the header so that the main parts of the image are visible as wanted.

The following image is the default image, we will tell you how to change it:

The code you need to change the background image of the header is.

    .main-header {
        background-image: url(' image-url ');
    }
    

Copy the code and replace image-url with the URL to the image you want to appear in the hero banner. Make sure the image is linked directly, to either .jpg/.png file and is wide in dimension.

Say the image is at the web address: http://example.com/images/my-image.jpg, then the code I would have would be:

    .main-header {
        background-image: url(' http://example.com/images/my-image.jpg ');
    }
    

Apply the CSS Code

Once you have copied the code you have to apply it on your blog using the Custom CSS option in Blogger Dashboard > Template > Customize > Advanced > Custom CSS or refer to the tutorial: How to Add CSS To Blogger Blogs and apply the changes so that the changes appear.

Hero Image Background & Text (Premium Only)

This template includes a hero image banner above the main content area on the main home page which you can use to display your aim, represent your business or hobby or anything you can think of.

Changing the Hero Background Image

The first thing you might want to do is to change the background image of the banner. To do it you have to use the following code and apply it on your Blog.

    #hero_image_slate {
        background-image: url(' image-url ');
    }
    

Copy the code and replace image-url with the URL to the image you want to appear in the hero banner. Make sure the image is linked directly, to either .jpg/.png file and is wide in dimension.

Say the image is at the web address: http://example.com/images/my-image.jpg, then the code I would have would be:

    #hero_image_slate {
        background-image: url(' http://example.com/images/my-image.jpg ');
    }
    

Apply the CSS Code

Once you have copied the code you have to apply it on your blog using the Custom CSS option in Blogger Dashboard > Template > Customize > Advanced > Custom CSS or refer to the tutorial: How to Add CSS To Blogger Blogs

Changing the Texts

The text part are to be edited by accessing the blog's template in HTML mode. To do that follow the instructions:

Go to Blogger Dashboard > Template > Edit HTML, now hit CTRL/CMD + F and search for this string:

<aside id='hero_image_slate'>

Once you search for the string on the page you might find this piece of code which is used for rendering the hero image:

<!-- Hero image Wide (by default only available on homepage) -->
<b:if cond='data:blog.pageType contains {&quot;static_page&quot;, &quot;index&quot;} || data:blog.url == data:blog.homepageUrl'>
    <aside id='hero_image_slate'>
      <div class='c-inner'>
        <div class='main-text'>
            <h3>I love exploring and capturing the moments.</h3>
          <div class='secondary-text'><span> - John Doe, author of this blog.</span></div>
        </div>
      </div>
    </aside>
</b:if>
<!-- Hero Image Wide -->
    

The text you have to edit have been highlighted in the above code. Just change the text part of the code and save the changes.

All Template Designer Option in Available in Premium Only

Change Color Scheme (Premium only)

With our advanced customizablity options we have added a way for you to change the color scheme of your blog completely from a GUI template editor that Blogger provides by default.

Changing the primary, secondary and default dark color is very easy to meet the requirements for your blog, by default it is primary, secondary and grey

From The Template Designer

Go to your Blogger Dashboard and then Template > Customize > Advanced > Color Scheme, now use the color picker to change the colors as per your requirement.

Easy! See you don't have to touch a piece of code to do this unlike other blogger templates.

Note: You can change the main colors, still you will be able to change the colors of header and other parts of the blog separately.

Changing Backgrounds

We have provided options to change backgrounds colors too! You can change the Background colors of main body, header, the navbar (secondary) and also the footer.

Body Background

Go to Blogger > Template > Customize > Advanced > Page:

Change the body background color as you need.

Header Background (Premium Only)

Go to Blogger > Template > Customize > Advanced > Blog Title:

Customize the background color of the header.

Other Customizations

There are more customizations you can make to the Slate template in the Template Designer. Go to the Template Designer and change whatever you like: Post Title, Page's font, Colors and more.

Link Colors

You might want to change the links color when you change the color scheme so do take a look at it to adjust the colors to look best. All the options are available in Template Designer at Template > Customize > Advanced

Fonts

You can choose fonts for most of the major and important parts of the blog using the Template Designer. Look in for options in the Template Designer under Advance section.

Want more?

For even deeper customization for example say you want to change the border radius of author's image, or padding of the post body, these are just to name a few. To make these advanced customization Template Designer wouldn't come handy, you will have to directly make the changes from the CSS code.

How to make Videos Responsive in Post

If you are posting videos from YouTube, Vimeo etc. on your blog using their share embed code you might want make them responsive so that it appears well in mobile and smaller screen sizes.

We use the jQuery FitVid plugin to make videos responsive. We don't apply this on the videos automatically as there are times you don't want a video to size down or up according to the screen size so we left it on you.

How to do it

The setup is basic, first get your embed code from the video streaming service like YouTube, Vimeo, Dailymotion etc. For e.g we have this code from video website:

        <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/QH2-TGUlwu4"></iframe>
    

Your code might be slightly different but you can see the similarities.

Now you just have to wrap a new code around it so it looks like this. The key is class="fit":

    <div class="fit">
        <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/QH2-TGUlwu4"></iframe>
    </div>
    

Now that video will be responsive and will appear in viewport on every screen size.

Problems

Nothing is perfect, thus this template has some flaws too but I bet that's not going to be problematic much, they are just some little limitations.

Can't change Auto summary to full Post

You can't change the small post summary on index pages to display full posts. Where this might have been an option we think that post summary on Homepages and index pages are much better as it speeds up the blog and that results in more pageviews and better rank.

Responsive Design Doesn't Show Up on Mobile Devices

Do remember that you have to turn off mobile template on your blog so that it loads the Slate Template and not the mobile version of Blogger's default template. Go to Blogger Dashboard > Template > Click on the Cog icon under "Mobile" column and select the option show in the image below.

And save it.